<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
		
		<!-- 评价星 -->
		<link
			href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"
			rel="stylesheet">
		<link href="css/star-rating.css" media="all" rel="stylesheet"
			type="text/css" />
		<link href="css/star-rating.min.css" media="all" rel="stylesheet"
			type="text/css" />
		<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
		<script src="js/star-rating.js" type="text/javascript"></script>
		<script src="js/star-rating.min.js" type="text/javascript"></script>
		
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet"
			href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
			integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
			crossorigin="anonymous">
		
		<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
		<link rel="stylesheet"
			href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
			integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
			crossorigin="anonymous">
		
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script
			src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
			integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
			crossorigin="anonymous"></script>
			
		<!-- 页面事件响应 -->
		<script type="text/javascript" src="js/orderinfo.js"></script>
		
		<link rel="stylesheet" href="css/orderinfo.css" type="text/css"/>
		<title>订单详情页</title>
	</head>
	<body>
		<div class="menu-bar">
            <nav class="navbar navbar-inverse navbar-fixed-top">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle show pull-left" data-target="sidebar">
                            <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                        </button>
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                                aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="">Welcome to Take-Out System!</a>
                    </div>
                    <div id="navbar" class="collapse navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li><a href="showMerchants">首页</a></li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-expanded="false"><i class="fa fa-user fa-fw"></i>&nbsp;${client.cname}&nbsp;<span class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="toorderlist">订单列表</a></li>
	                                <li><a href="toaddress">配送地址管理</a></li>
	                                <li><a href="tologout">退出登录</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
        
        <div class="main">
                
                <!--商家名-->
                <div class="page-header">
                  <h1 style="text-align: center">${merchant.mname}</h1>
                </div>
                
                <!--订单状态-->
                
                <div class="jumbotron">
                  <div class="container">
                    <h2>${info}</h2>
                    <p>${moreinfo}</p>
                  </div>
                </div>
                
                
                <!--订单详情-->
                <div>

                    <!--收货地址-->
                    <div>
                        <div  class="list-group">
                          <a  class="list-group-item list-group-item-info">
                            <h3 class="list-group-item-heading">配送信息</h3>
                            <p id="addr" class="list-group-item-text"> 收件人： ${dinfo.contact } 联系电话： ${dinfo.tel } 配送地址： ${dinfo.addr }</p>
                          </a>
                        </div>
                       
                    </div>
                    
                </div>
                
                <!--菜品列表及相关信息-->
                <div>
                    <ul class="list-group">
                    	<c:forEach items="${infolist }" var="o">
                    		<li class="list-group-item list-group-item-warning">
		                        <div class="media">
		                          <div class="media-left media-middle">
		                            <a href="#">
		                              <img width="120px" height="100px"  class="foodimg media-object" src="${o.food.fimg }" alt=" ${o.food.fname }">
		                            </a>
		                          </div>
		                          <div class="media-body">
		                            <h4 class="media-heading">${o.food.fname }</h4>
		                            <p><span class="price-type">价格</span><span class="detail-price">×${o.fcnt}
		                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		                            	￥${o.food.fprice}</span></p>
		                            
		                          </div>
		                        </div>  
		                      </li>
                    	</c:forEach>
                    </ul>
                    <div>
                        <p style="text-align: right; font-size: 20px">共付：<span style="color: red;font-size: 30px">￥${sum}</span></p>
                    </div>
                </div>
                
                
                <!-- 在商家未接单状态可以取消订单 -->
                <div id="canceldiv">
                	<c:if test="${orderstate=='0' }">
                		<button id="cancelalert" class="btn btn-warning">取消订单</button>
                	</c:if>
                </div>
                
                <!-- 取消订单模态框 -->
                <div id="cancelModal" class="modal fade" tabindex="-1" role="dialog">
				  <div class="modal-dialog" role="document">
				    <div class="modal-content">
				      <div class="modal-header">
				        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				        <h4 class="modal-title">Modal title</h4>
				      </div>
				      <input type="hidden" id="icnum" value="${merchant.icnum }">
				      <form action="cancelorder" method="post">
				      	  
				      	  <input type="hidden" name="oid" value="${orderid }">
					      <div class="alert alert-warning" role="alert">
					      		您在商家未接单状态都可以取消订单，确认要取消订单吗？
						  </div>
					      
					      <div class="modal-footer">
					        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					        <button id="cancelbtn" type="submit" type="button" class="btn btn-primary">确认取消</button>
					      </div>
				      </form>
				    </div><!-- /.modal-content -->
				  </div><!-- /.modal-dialog -->
				</div><!-- /.modal -->
                
                
                <!-- 确认收货按钮，在订单正在派送状态会显示 -->
                
                <div id="confirmdiv">
                	<c:if test="${orderstate=='3' }">
	                	<button id="confirmalert" class="btn btn-danger">确认收货</button>
                	</c:if>
                </div>
                <!-- 确认收货模态框 -->
                <div id="confirmModal" class="modal fade" tabindex="-1" role="dialog">
				  <div class="modal-dialog" role="document">
				    <div class="modal-content">
				      <div class="modal-header">
				        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				        <h4 class="modal-title">Modal title</h4>
				      </div>
				      <form action="confirmorder" method="post">
				      	  <input type="hidden" name="oid" value="${orderid }">
					      <div class="alert alert-danger" role="alert">
					      		请确保收到配送，一旦确认收货，支付钱款会转到商家账户
						  </div>
					      
					      <div class="modal-footer">
					        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					        <button id="confirmbtn" type="submit" type="button" class="btn btn-primary">确认收到</button>
					      </div>
				      </form>
				    </div><!-- /.modal-content -->
				  </div><!-- /.modal-dialog -->
				</div><!-- /.modal -->
                
                <!-- 评论及投诉 -->
                <div class="comment" style="font-size: 20px">
                    <!-- 评论 -->
                    <div class="ordercomment">
	                    
	                    	
	                    	<c:if test="${orderstate!='4' }">
	                    		
	                    	
	                    	</c:if>
	                    	<c:if test="${orderstate=='4' }">
	                    		
		                    		<!-- 订单完成，但是未评论，显示填写评论 -->
		                    		<c:if test="${empty cmt }">
		                    			<div class="fillcmt">
					                        <div class="panel panel-default">
					                          <!-- Default panel contents -->
					                          <div class="panel-heading">您尚未评价过该订单</div>
					                          <div class="panel-body">
					                              <label>
					                              	<input type="hidden" name="oid" value="${orderid }">
					                                <span>请输入您的评论：<p>还可以输入<span id="word">50</span>个字</p></span>
					                                <textarea class="well" id="cmttext" name="comment" placeholder="Your Message to Us"></textarea>
					                                <span id="cmtwarning" style="color: red;"></span>
					                              </label>
					                              <div id="star-rating">
					                                  <input id="kartik" name="grade" class="rating" data-stars="5" data-step="0.1" title=""/>
					                                  <div class="form-group" style="margin-top:10px">
					                                        <button id="rate-btn" class="btn btn-primary btn-lg">提交评分</button>
					                                  </div>
					                              </div>
					                          </div>
					                        </div>
				                        </div>
		                    		</c:if>
		                    		<!-- 订单完成，已评论 ，显示评论内容-->
		                    		<c:if test="${!empty cmt}">
		                    			<div class="panel panel-success">
		                            
				                          <!-- Default panel contents -->
				                          <div class="panel-heading">您已经评价过该订单</div>
				                          <div class="panel-body">
				                              <!-- List group -->
				                              <!-- 用户评论 -->
				                              <ul class="list-group">
				                                <li id="cmt" class="list-group-item">
				                                    <p>您在<span class="cmt-time">${ordercmt.ctime }</span>发表评论:</p>
				                                    <p class="publish">${ordercmt.comments }</p>
				                                </li>
				                                <p>${ordercmt.reply}</p>
				                                <c:if test="${!empty ordercmt.reply}">
					                                <div>  
						                                <!-- 商家回复 -->
						                                <li id="reply" class="list-group-item">
						                                    <p>商家在<span class="reply-time">${ordercmt.rtime }</span>回复:</p>
						                                    <p class="publish">${ordercmt.reply }</p>
						                                </li>
					                                </div>
				                                </c:if>
				                              </ul>
				                            
				                          </div>
				
				                        </div>
		                    		
		                    		</c:if>
	                    		
	                    	</c:if>
	                    
	                    
                    </div>
                    
                    
                    <!-- 投诉 -->
                    <div class="complaint">
                    
                    	<div id="myModal"class="modal fade" tabindex="-1" role="dialog">
						  <div class="modal-dialog" role="document">
						    <div class="modal-content">
						      <div class="modal-header">
						        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						        <h4 class="modal-title">请输入投诉理由</h4>
						      </div>
						      <div class="modal-body">
						        <input type="hidden" name="oid" value="${orderid }">
				                <span><p>还可以输入<span id="compword">100</span>个字</p></span>
				                <textarea class="well"id="comptext" name="comment" placeholder="Your Complaint Reason"></textarea>
				                <span id="compwarning" style="color: red;"></span>
						      </div>
						      <div class="modal-footer">
						        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
						        <button id="submitcomp" type="button" class="btn btn-primary">确定</button>
						      </div>
						    </div>
						  </div>
						</div>
                    	
                    	
	                    
				            
	                    	<c:if test="${orderstate!='4' }">
	                    	
	                    	
	                    	</c:if>
	                    	<c:if test="${orderstate=='4' }">
	                    		<c:if test="${compstate=='0' }">
			                    	<div id="complaint-button">
			                    		
				                    	<button id="compbtn" class="btn btn-danger">向平台投诉</button>
						            </div>
					            </c:if>       
		                    		<%-- <c:when test="${complaint }">
		                    			<div class="fillcomp panel panel-default">
				                              <!-- Default panel contents -->
				                              <div class="panel-heading">如果您对本次外卖有任何不满意的地方，可以向管理平台申请投诉，请输入投诉理由</div>
				                              <div class="panel-body">
				                                  <label>
				                                  	<input type="hidden" name="oid" value="${orderid }">
				                                    <span><p>还可以输入<span id="compword">100</span>个字</p></span>
				                                    <textarea class="well"id="comptext" name="comment" placeholder="Your Complaint Reason"></textarea>
				                                  </label>
				                                  <button id="comp-btn"type="submit" class="btn btn-primary btn-lg">提交投诉</button>
				                              </div>
				                        </div>
		                    		</c:when>
		                    		<c:otherwise>
				                    
		                    			<div class="panel panel-default">
										  <div class="panel-heading">
										    <h3 class="panel-title">您已投诉商家 ${merchant.mname }，投诉理由如下：</h3>
										  </div>
										  <div class="panel-body">
										    ${complaint }
										  </div>
										</div>
		                    		</c:otherwise> --%>
		                    	
	                    	</c:if>
	                    
                    </div>
                </div>
            
        </div>
        
        <script type="text/javascript">
            
                
                
            
        </script>
	</body>
</html>